<template>
  <view class="cart">
    <view class="goods-list">
      <view class="goods" v-for="(item, index) in list" :key="item.goods_id">
        <!-- 复选框开始 -->
        <view class="goods-chk">
          <radio-group @click="handleGoodsChange(index)">
            <radio
              class="chk"
              :value="item.goods_id"
              color="#eb4450"
              :checked="item.checked"
            ></radio>
          </radio-group>
        </view>
        <!-- 图片 -->
        <view class="goods-img">
          <u-image
            width="100%"
            mode="widthFix"
            :src="item.goods_small_logo"
          ></u-image>
        </view>
        <!-- 名称 -->
        <view class="goods-info">
          <!-- 商品名称 -->
          <view class="goods-name u-line-2">{{ item.goods_name }}</view>
          <!-- 商品编辑栏 -->
          <view class="goods-tool">
            <!-- 商品价格 -->
            <view class="goods-price">￥{{ item.goods_price }}</view>
            <!-- 商品数量 -->
            <view class="goods-count">
              <view class="goods-edit" @click="handlerchange(index, -1)"
                >-</view
              >
              <view class="goods-num">{{ item.count }}</view>
              <view class="goods-edit" @click="handlerchange(index, 1)">+</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 全选状态数据栏 -->
    <view class="status-tool">
      <view class="all-chk">
        <radio-group class="chk">
          <radio color="#eb4450" :checked="allChecked" @click="handleAllCheck"
            >全选</radio
          >
        </radio-group>
      </view>
      <!-- 总价 -->
      <view class="price">
        合计：<text>￥{{ allPrice }}</text>
      </view>
      <!-- 结算 -->
      <view class="settle" @click="goOrder"> 去结算{{ allCount }} </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // list: {},
    };
  },
  computed: {
    // 提取store的list数组
    list() {
      return this.$store.state.list;
    },
    // 计算全选是否要选中
    // 使用数组方法every,数组里每一个条件都符合返回true，需要注意空数组也会返回true
    allChecked() {
      return this.list.length && this.list.every((goods) => goods.checked);
    },
    // 商品的总价合计       // 把每一个商品的单价相加起来并乘以每一个选中的商品的数量
    // allPrice() {
    //   let allPrice = 0;
    //   this.list.forEach((goods) => {
    //     if (goods.checked) {
    //       allPrice += goods.goods_price * goods.count;
    //     }
    //   });
    //   return allPrice;
    // },
    allPrice() {
      return this.$store.getters.allPrice;
    },
    // 商品数量统计
    allCount() {
      // let allCount = 0;
      // this.list.forEach((goods) => {
      //   if (goods.checked) {
      //     allCount += goods.count;
      //   }
      // });
      // return allCount;
      return this.$store.getters.allCount;
    },
  },
  async onLoad() {},
  methods: {
    // 单选框的点击事件
    handleGoodsChange(index) {
      const list = this.list;
      // 找到当前复选框所在的数组中的元素
      list[index].checked = !list[index].checked;
      this.$store.commit("getList", list);
    },
    // 商品数量的加减
    async handlerchange(index, num) {
      const list = this.list;
      //  如果count的数量为一是，用户继续点击 “-”，弹窗询问时候删除商品
      if (list[index].count === 1 && num === -1) {
        const [error, result] = await uni.showModal({
          title: "提示",
          // content: '您真的舍得删除吗😶',
          content: "你真的要删除这个商品吗",
          showCancel: true,
          cancelText: "取消",
          cancelColor: "#000000",
          confirmText: "确定",
          confirmColor: "#3CC51F",
        });
        if (result.confirm) {
          console.log("点击确定");
          list.slice(index, 1);
          this.$store.commit("getList", list);
        } else {
          console.log("点击取消");
        }
      } else {
        list[index].count += num;
        this.$store.commit("getList", list);
      }
    },
    // 全选功能的变化
    handleAllCheck() {
      //  获取全选按钮的选中状态，进行取反
      const checked = !this.allChecked;
      // 获取到数组
      const list = this.list;
      // 循环，逐个设置选中的状态
      list.forEach((goods) => (goods.checked = checked));
      // 提交修改
      this.$store.commit("getList", list);
    },
    // 去结算页面
    goOrder() {
      if (this.allCount > 0) {
        uni.navigateTo({
          url: "/pages/pay/pay",
        });
      } else {
        uni.showToast({
          title: "您还没有选购商品",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss">
.cart {
  .goods-list {
    .goods {
      display: flex;
      padding: 10rpx;
      .goods-chk {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .goods-img {
        flex: 2;
        padding: 10rpx;
      }

      .goods-info {
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .goods-name {
        }

        .goods-tool {
          display: flex;
          justify-content: space-between;
          .goods-price {
            font-size: 30rpx;
            color: #eb4450;
          }

          .goods-count {
            width: 150rpx;
            justify-content: space-between;
            display: flex;
            .goods-edit {
              width: 40rpx;
              height: 40rpx;
              border: 1rpx solid #ccc;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
            }

            .goods-num {
            }
          }
        }
      }
    }
  }
  .status-tool {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    background-color: #fff;
    height: 80rpx;
    border-top: 1rpx solid #eee;
    display: flex;
    padding: 0 10rpx;
    align-items: center;
    justify-content: space-between;
    .all-chk {
      radio-group {
        .chk {
        }
      }
    }
    .price {
      flex: 1;
      padding: 0 30rpx;
      text {
        font-size: 30rpx;
        color: #eb4450;
      }
    }
    .settle {
      width: 170rpx;
      height: 50rpx;
      font-size: 24rpx;
      border-radius: 25rpx;
      background-color: #eb4450;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>